<template>
  <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="编号"
        width="160">
    </el-table-column>
    <el-table-column
        prop="name"
        label="名称"
        width="160">
    </el-table-column>
    <el-table-column
        prop="sale"
        label="销量"
        width="150">
    </el-table-column>
    <el-table-column
        label="图片"
        width="150">
      <template slot-scope="scope">
        <img :src="scope.row.icon" style="height: 70px"/>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="updClick(scope.row)" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name:'table',
  methods: {
    updClick(Object){
      this.$router.push("/upd?id="+Object.id)
    },
    delClick(object) {
      this.$confirm('您确定要删除'+object.name+'吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this;
        _this.loading = true;
        axios.delete("http://localhost:8081/fruit/del/"+object.id).then(function (response){
          if(response.data){
            _this.loading = false;
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
            location.reload()
          }
        })
      }).catch(() => {

      });
    }
  },
  created() {
    let _this = this;
    axios.get('http://localhost:8081/fruit/list').then(function (respones){
      _this.tableData = respones.data
      _this.loading = false
    })
  },
  data() {
    return {
      tableData: null,
      loading: true
    }
  }
}
</script>